<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>图形报表</el-breadcrumb-item>
    </el-breadcrumb>

    <div style="display: flex">
      <div ref="chart1" style="margin:10px;width: 100%; height: 600px"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Chart",
  data() {
    return {
      title: "图形报表",
      tableData: [],
      name: [],
      courses: [],
      a: [],
      series: [],
    };
  },
  methods: {
    setStaticData() {
      this.name = ['test', 'test1', 'student1','student2','student3','student4'];
      this.courses = ['大物', 'c++', '概率论','计组','软件工程', '数据结构', '网络安全'];
      this.series = [
        { name: '大物', type: 'line', data: [45, 92, 57, 75, 88, 90] },
        { name: 'c++', type: 'line', data: [78, 88, 86, 40, 82, 85] },
        { name: '概率论', type: 'line', data: [90, 76, 50, 85, 72, 87] },
        { name: '计组', type: 'line', data: [82, 91, 84, 88, 77, 90] },
        { name: '软件工程', type: 'line', data: [86, 84, 91, 34, 92, 85] },
        { name: '数据结构', type: 'line', data: [74, 79, 87, 93, 81, 40] },
        { name: '网络安全', type: 'line', data: [81, 87, 83, 90, 78, 92] }
      ];

      const myChart = this.$echarts.init(this.$refs.chart1);
      const option = {
        title: {
          text: "学生各科成绩",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: this.courses,
          top: "10%",
        },
        grid: {
          left: "3%",
          right: "8%",
          bottom: "3%",
          top: "25%",
          containLabel: true,
        },
        xAxis: {
          name:"学生",
          type: "category",
          boundaryGap: false,
          data: this.name,
        },
        yAxis: {
          name:"分数",
          type: "value",
          min: 30,
          max: 100,
          interval: 10,
        },
        series: this.series,
      };
      myChart.setOption(option);
    },
  }, 
  mounted() {
    this.setStaticData(); // 调用此方法以设置静态数据
  },

};
</script>

<style lang="less" scoped>
.el-breadcrumb {
  padding-bottom: 10px;
}
</style>
